﻿
<link rel="stylesheet" type="text/css" href="{$_G['URL']['FANPAI_CSS']}css/index.css?v=15">
<script type="text/javascript" src="{$_G['URL']['FANPAI_CSS']}js/rem.js?v=1"></script>

<div class="popupfanpai">
  <img src="{$_G['URL']['FANPAI_CSS']}img/wishbg.png" class="popup-imgg">
  <div class="popup-img row">
    <img id="popup-newimg" src="{$_G['URL']['FANPAI_CSS']}img/e.png">
  </div>
</div>
<div class="beijing">
<div id="projects">
    <div class="grid">
      <div class="projects ">
        {loop $fanpailist $index $item}
        <div class="project ani{$index} {if $yichou == 0 || !empty($item['newgift']) }showli{/if}">
          <div class="mask">
            {if $yichou == 0 }
            <div class="back" style="background: url({php echo tomedia($item['giftimg']);}) 0% 0% / 100% 100% no-repeat;"></div>
            {elseif !empty($item['newgift'])}
              <div class="back" style="background: url({php echo tomedia($item['newgift']);}) 0% 0% / 100% 100% no-repeat;"></div>
            {else}
              <div class="back" style="background: url({php echo tomedia($config['fanpaiimg']);}) 0% 0% / 100% 100% no-repeat;"></div>
            {/if}
            <div class="front"><span></span></div>
          </div>
        </div>
        {/loop}
        <div class="controlss ">
          <div class="mask ">
            {if $yichou == 0 }
              {if ($config['fanpaifanwei'] == 1)}
              <div class="text start"><span>开始</span></div>
              {elseif !empty($themyrecordid)}
              <div class="text start"><span>开始</span></div>
              {else}
              <div class="text"><span>报名后，方可参于</span></div>
              {/if}
            {/if}
          </div>
        </div>
        <div class="controlss1" {if $yichou == 0 } style="display: none"{/if}>
          <input class="controlss1-input" value="{$jihui}" type="hidden">
          <p class="controlss1-p">当前剩余{$jihui}次机会</p>
        </div>
      </div>
    </div>
</div>
<div class="bg_bg "></div>

<div class="index-1 column beijing">

  <div class="index-1-top">
    <p>现场传来喜讯</p>
  </div>
{if !empty($fanpaijilu)}
  <div class="index-1-bto" id="index-1-bto">
    <div class=" column" id="comment1">

      {loop $fanpaijilu $item}
      <div class="index-1-bto-list row">
        <img src="{$item['avatar']}">
        <div class="index-1-bto-list-b column">
          <div class="index-1-bto-list-b-t row">
            <div class="index-1-bto-list-b-t-l">
              <p><span>恭喜</span>{php echo mb_substr($item['nickname'],0,5,'utf-8');}</p>
            </div>
            <div class="index-1-bto-list-b-t-r">
              {php echo mb_substr($item['mobile'],0,3,'utf-8').'****'.mb_substr($item['mobile'],$usernamelen-4,4,'utf-8');}
            </div>
          </div>
          <div class="index-1-bto-list-b-b">
            {$item['giftname']}
          </div>
        </div>
      </div>
      {/loop}

    </div>
    <div id="comment2">

    </div>
  </div>
{/if}
</div>
</div>
<!-- <script type="text/javascript" src="{$_G['URL']['FANPAI_CSS']}js/jquery.js"></script>
 -->
 <script type="text/javascript">
    var  array=[];
  $(function(){
    $('.start').click(function(){
        $(this).addClass('show');
        $('.start').html('');
          subMove();
          setTimeout( function () {
              addMove();
              $(".back").css("background-image","url({$_G['URL']['FANPAI_CSS']}img/project_front_bg.png)")
          },600)
        $(this).hide();
          $(".controlss1").css("display","block")
    });

    $('.project').click(function () {
      if($(this).hasClass('showli')){
        console.log(45);
      }else{
          var  val=$(".controlss1-input").val();
          if (val!=0){
              $(".controlss1-input").val(val-1);
              $(".controlss1-p").text("当前剩余"+(val-1)+"次机会");
              var ind = $(".project").index($(this));
              $(this).addClass('showli');
             $.ajax({
                  type: 'GET',
                  dataType : "json",
                  url:'/{php echo createMobileUrl("fanpai",array("themeid"=>$themeid));}'+"&weizhi="+ind,
                  success: function(data) {
                  data = data.message;
                  if(data.errcode == 1){
                        console.log(ind);
                        setTimeout(function () {
                            $(".back:eq("+ind+")").css({
                                "background-image":"url("+data.msg+")",
                                "transition":"all 1s cubic-bezier(0.68,-.55,.265,1.55)"
                            })

                        },1000);
                        setTimeout(function () {
                            $(".popupfanpai").css("display","block")
                            $('#popup-newimg').attr('src',data.successimg);
                        },3400)
                        $(".popupfanpai").on("click",function () {
                            $(this).css("display","none")
                        })

                     }else{
                        tips(data.msg);
                     }
                  },
                  error: function() {
                  }
              });
          }else{
            alert('抽奖机会已用完！');
          }
      }
    })
  });

  function addMove(){
      // while(array.length<9){
      //     var rand = Math.floor(Math.random()*9);
      //     var cunz=0;
      //     for(var i = 0 ; i < array.length; i++){
      //         if(array[i] == rand){
      //             cunz=1;
      //         }
      //     }
      //     if(cunz==0){
      //         array.push(rand);
      //     }else {
      //         cunz=0;
      //     }
      // }
    $('.project').each(function(index,item){
      setTimeout(function(){
          $(item).addClass('ani'+ index);
          // $(item).addClass('ani'+ array[index]);
     },500);
    })
  }

  function subMove(){
    $('.project').each(function(index,item){
      $('.project').removeClass('showli');
      $(item).removeClass('ani'+ index);
    })
  }
</script>
{if !empty($fanpaijilu)}
<script>
    window.onload = roll(50);

    function roll(t) {
        var ul1 = document.getElementById("comment1");
        var ul2 = document.getElementById("comment2");
        var ulbox = document.getElementById("index-1-bto");
        ul2.innerHTML = ul1.innerHTML;
        ulbox.scrollTop = 0; // 开始无滚动时设为0
        var timer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
        // 鼠标移入div时暂停滚动
        var rr=0;
        $("#index-1-bto").on("click",function () {
            if(rr==0){
                clearInterval(timer);
                rr=1;
            }else {
                timer = setInterval(rollStart, t);
                rr=0;
            }
        });

    }

    // 开始滚动函数
    function rollStart() {
        // 上面声明的DOM对象为局部对象需要再次声明
        var ul1 = document.getElementById("comment1");
        var ul2 = document.getElementById("comment2");
        var ulbox = document.getElementById("index-1-bto");
        // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
        if (ulbox.scrollTop >= ul1.scrollHeight) {
            ulbox.scrollTop = 0;
        } else {
            ulbox.scrollTop++;
        }
    }
</script>
{/if}